<template>
  <div class="home">
    <div> Home </div>
    <div>userName：{{ userName }}</div>
    <button @click="SET_USERNAME('Yu Jie')">点击设置用户名字</button>
    <button @click="resetState">点击重置用户名字</button>
  </div>
</template>

<script>
import userStoreModule from '../store/modules/user'
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  name: 'Home',
  asyncData ({ store }) {
    store.registerModule('user', userStoreModule)
    return store.dispatch('detail/inc')
  },
  // 重要信息：当多次访问路由时，
  // 避免在客户端重复注册模块。
  destroyed () {
    this.$store.unregisterModule('user')
  },
  computed: {
    ...mapState('user', ['userName'])
  },
  methods: {
    ...mapActions('user', ['resetState']),
    ...mapMutations('user', ['SET_USERNAME'])
  }
}
</script>
